vue3.0 使用Element Plus修改el-table表格的横纵滚动条颜色、宽高等样式

原创已于 2024-10-18 09:59:35 修改 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端 #css

于 2024-10-18 09:57:01 首次发布

在 Vue 3.0 和 Element Plus 中修改 el-table 的滚动条样式，可能遇到了样式不生效的问题。这通常是因为 Element Plus 使用了自定义的滚动条组件 el-scrollbar，而不是浏览器默认的滚动条。因此，需要针对 el-scrollbar 组件进行样式定制。

<style scoped>
/* 滚动条整体部分 */
::v-deep .el-scrollbar__bar {
  opacity: 1; /* 使滚动条不透明 */
}

/* 横向滚动条的滑块 */
::v-deep .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
  border-radius: 1px; /* 滑块的圆角 */
  background-color: #a40808; /* 滑块的背景颜色 */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); /* 滑块的阴影 */
}

/* 纵向滚动条的滑块 */
::v-deep .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
  border-radius: 1px;
  background-color: #ea0909;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

/* 滚动条的轨道部分 */
::v-deep .el-scrollbar__wrap {
  &::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道的背景颜色 */
  }
}

/* 修改滑块宽度 */
::v-deep .el-scrollbar__bar.is-horizontal {
  height: 12px;
}
::v-deep .el-scrollbar__bar.is-vertical {
  width: 12px;
}
</style>